<template>
  <div class="order">
    <Header title="订单" />
    <div class="content">
      <van-tabs color="#ffc400">
        <!-- 这里完成结算的订单的数据没有拿到！！！ -->
        <van-tab v-for="(i, index) in navData" :title="i" :key="index">
          <div v-if="i === '全部' && store.state.orderListed.length">
            <div v-for="(i, index) in store.state.orderListed" :key="index">
              <van-card
                :num="i.num"
                :price="i.price"
                :title="i.title"
                :thumb="i.pic"
              />
            </div>
          </div>
          <Blank v-else />
        </van-tab>
      </van-tabs>
    </div>
    <Footer />
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";

import Footer from "../../components/Footer.vue";
import Header from "../../components/Header.vue";
import Blank from "../../components/Blank.vue";
import { useStore } from "vuex";
export default {
  components: {
    Footer,
    Header,
    Blank,
  },
  setup() {
    const store = useStore();
    let data = reactive({
      navData: ["全部", "交易完成", "待付款", "代发货", "已发货"],
    });
    onload = () => {
      console.log(store.state.orderListed);
    };
    return {
      ...toRefs(data),
      store,
    };
  },
};
</script>
<style lang="less" scoped>
.order {
  display: flex;
  flex-flow: column;
  height: 100%;
  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
